<template>
	<view class="home">
		<view class="title">请选择反馈问题的类型(必选其一)</view>
		<view class="content_item">
			<view class="">性能体验<text style="color: #C8C7CC;font-size: 30rpx;" decode>{{space}}{{space}}{{space}}白屏、卡顿、闪退等</text></view>
			<u-switch v-model="checked_one" @change="change_one" :disabled="checked_one_switch"></u-switch>
		</view>
		<view class="content_item">
			<view class="">功能异常<text style="color: #C8C7CC;font-size: 30rpx;" decode>{{space}}{{space}}{{space}}现有功能无法使用等</text></view>
			<u-switch v-model="checked_two" @change="change_two" :disabled="checked_two_switch"></u-switch>
		</view>
		<view class="content_item">
			<view class="">产品建议<text style="color: #C8C7CC;font-size: 30rpx;" decode>{{space}}{{space}}{{space}}用的不爽，建议都提出来吧</text></view>
			<u-switch v-model="checked_three" @change="change_three" :disabled="checked_three_switch"></u-switch>
		</view>

		<view class="problem" style="margin-top: 20px;">
			<view class="title">问题和意见</view>
			<view class="problem_item">
				<textarea v-model="message.content" placeholder="请详细描述您遇到的问题(10个字以上),上传页面截图帮助更快解决哦!" :disabled="if_input" />
				</view>
		</view>
		
		<view class="picture" style="margin-top: 20px;">
			<view class="title">添加图片(选填，提供问题截图)</view>
			<view class="upload">
				<view class="">添加:</view>
				<image :src="msg_campus_special" mode="" @click="special"></image>
			</view>
		</view>
		
		<button type="primary" @click="submit">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked_one: false,
				checked_two:false,
				checked_three:false,
				checked_one_switch: false,
				checked_two_switch:false,
				checked_three_switch:false,
				if_input:true,
				space:'&nbsp;',
				msg_campus_special: '../../static/temp/add.png',
				message:{
					type:0,
					content:''
				}
			}
		},
		methods: {
			change_one(){
				this.if_input = !this.if_input;
				this.checked_two_switch = !this.checked_two_switch;
				this.checked_three_switch = !this.checked_three_switch;
			},
			change_two(){
				this.if_input = !this.if_input;
				this.checked_one_switch = !this.checked_one_switch;
				this.checked_three_switch = !this.checked_three_switch;
			},
			change_three(){
				this.if_input = !this.if_input;
				this.checked_one_switch = !this.checked_one_switch;
				this.checked_two_switch = !this.checked_two_switch;
			},
			special() {
				this.msg_campus_special = '../../static/temp/add_green.png';
				let id = setInterval(() => {
					this.msg_campus_special = '../../static/temp/add.png';
					uni.chooseImage({
						count: 1,
						success: res=>{
							uni.setStorageSync('msg_campus', res.tempFilePaths[0]);
						}
					})
					clearInterval(id);
				}, 1000)
			},
			async submit(){
				if(this.checked_one == false && this.checked_two == false && this.checked_three == false){
					return;
				}else{
					if(this.message.content == ''){
						return;
					}
				}
				
				if(this.checked_one == true){
					this.message.type = 1;
				}
				else if(this.checked_two == true){
					this.message.type = 2;
				}
				else{
					this.message.type = 3;
				}
				
				const res = await this.$myRequest({
					url:`add_evaluation?message=${JSON.stringify(this.message)}`
				})
				if(res.data.code == 0){
					uni.showToast({
						title:'反馈成功!',
						mask:true,
						duration:800,
						success:()=>{
							this.message.content = '';
							this.checked_one = false;
							this.checked_two = false;
							this.checked_three = false;
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.home{
		width: 100%;
		box-sizing: border-box;
		font-size: 35rpx;
		.title{
			padding: 0 20rpx;
			display: flex;
			line-height: 80rpx;
			font-size: 30rpx;
			text-align: left;
			color: #DD524D;
		}
		.content_item{
			width: 100%;
			display: flex;
			box-sizing: border-box;
			padding: 10px;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		
		
		.problem{
			width: 100%;
			
			.problem_item{
				
				textarea{
					width: 88%;
					padding: 20rpx;
					height: 140rpx;
					margin: 0 20rpx;
					border-radius: 12rpx;
					border: 1px solid #E4E7ED;
				}
			}
		}
		
		.picture{
			.upload {
				display: flex;
			
				view {
					height: 150rpx;
					line-height: 150rpx;
					margin-left: 15px;
				}
			
				image {
					display: block;
					width: 150rpx;
					height: 150rpx;
				}
			
			}
		}
		button{
			position: fixed;
			bottom: 80rpx;
			left:50%;
			font-size: 32rpx;
			transform: translateX(-50%);
			width: 90%;
		}
		button::after{
			border: none;
		}
	}
</style>
